.steps-container {
  // 区块组件，默认margin
  margin: $space-h-sm 0 $space-of-segments;

  .steps {
    padding: 0;
    list-style: none;
    font-size: 0;

    > .step {
      text-align: center;
      display: inline-block;
      position: relative;
      font-size: 18px;

      // 第一个节点和最后一个节点只要一般长度的连接线
      &:first-child > .step-line {
        left: 50%;
        width: 50%;
      }

      &:last-child > .step-line {
        width: 50%;
      }

      // 当第一个是最后一个时，隐藏连接线
      &:first-child:last-child > .step-line {
        width: 0;
      }

      // 线
      > .step-line {
        top: (28px - 4px) / 2;
        position: absolute;
        width: 100%;
        height: 4px;
        display: block;
        content: ' ';
        background-color: #d8d8d8;
      }

      // 节点
      > .step-node {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        line-height: 28px;
        border-radius: 50%;
        color: #fff;
      }

      // 标题
      > .step-title {
        margin-top: 5px;
        font-size: 12px;
      }

      // 当前节点，处理中
      &.process {
        .step-line,
        .step-node {
          background-color: #55b330;
        }

        .step-title {
          color: #55b330;
        }
      }

      // 等待处理
      &.wait {
        .step-line,
        .step-node {
          background-color: #d8d8d8;
        }

        .step-title {
          color: #585858;
        }
      }

      // 已完成
      &.finish {
        .step-line,
        .step-node {
          background-color: #a2db7f;
        }

        .step-title {
          color: #a2db7f;
        }
      }
    }
  }
}
